<template>
  <div class="searchdetail">
    <!-- 返回搜索部分 -->
    <div class="header">
      <backTitle></backTitle>
      <div class="van-ellipsis">{{this.$route.query.name}}</div>
      <router-link :to="{path:'/tuijian'}">
        <span class="back-home">
          <i class="iconfont icon-shouye"></i>
        </span>
      </router-link>
    </div>

    <!-- 歌单列表 -->
    <div class="songs">
      <span>{{err}}</span>
      <div class="songs-title">
        <span class="title-name">单曲</span>
        <span class="playall" @click="playall">
          <i class="iconfont icon-icon-test1">&nbsp;&nbsp;播放全部</i>
        </span>
      </div>
      <template v-for="(item, index) in songlist">
        <div class="song" :data-id="item.id" >
          <span>{{index+1}}、</span>
          <div class="van-ellipsis" @click="change(item.id,index)">
            <span class="songname">{{item.name}}</span>
            <span class="singername">&nbsp;-{{item.artists[0].name}}</span>
          </div>
          <span class="dian"  @click="clickpop(item.id)"> 
            <van-icon name="ellipsis" />
          </span>
        </div>
        
        <!-- 歌曲详情弹出层 -->
        <van-popup v-model="songdetailshow" class="songdetail" :style="{ height: '43%' }" round>
          <div class="detail">
            <span class="singerimg">
              <img :src="singerimg" />
            </span>
            <div class="name">
              <div class="van-ellipsis songname">{{name}}</div>
              <div class="van-ellipsis singername">{{singername}}</div>
            </div>
          </div>
          <!-- 添加 -->
          <div class="add" @click="clickplaylistpop()">
            <van-icon name="add-o" />
            <span>添加到歌单</span>
          </div>
          <!-- 歌手 -->
          <router-link
            :to="{path:'/geshou/singerdetail/id',
              query:{id:singerid,title:singername}}"
          >
            <div class="singer">
              <van-icon name="manager-o" />
              <span>歌手：{{singername}}</span>
            </div>
          </router-link>
          <!-- 评论 -->
          <router-link :to="{path:'/pinglun/pinglun/id',query:{id:songid}}">
            <div class="comment">
              <van-icon name="chat-o" />
              <span>评论</span>
            </div>
          </router-link>
        </van-popup>
      </template>
    </div>
    
    <!-- 歌单弹出层 -->
    <van-popup v-model="playlistshow" :style="{height: '50%' }" round class="playlistpop">
      <div class="playlist-title">我的歌单</div>

      <div class="usersonglists">
        <template v-for="(item, index) in playlist" >
        <div class="usersonglist" @click="addsong(item.id)">
          <span><img :src="item.coverImgUrl" ></span>
          <div class="van-ellipsis">{{item.name}}</div>
        </div>
      </template>
      </div>
    </van-popup>
  </div>
</template>

<script>
import backTitle from "../../components/back";
import send from "../../navshow";

export default {
  data() {
    return {
      value: "", //搜索框的值
      songlist: [], //获取歌曲列表
      err: "",
      songdetailshow: false, //歌曲详情弹出层
      songid: "", //歌曲id
      singerid: "", //歌手id
      singerimg: "", //歌手头像
      name: "", //歌名
      singername: "", //歌手名
      playlistshow:false, //歌单弹出层
      playlist:[], //用户歌单
    };
  },
  created() {
    // 隐藏播放器
    this.$store.commit("showplayer", true);

    var name = "http://120.26.184.71:4000/search?keywords=" +this.$route.query.name +"&type=1";
    this.axios
      .get(name)
      .then(res => {
        this.songlist = res.data.result.songs;
        this.singerlist = res.data.hotSongs;
        // 将歌单存到公共仓库中
        this.$store.commit("playsonglist", this.songlist);
        // });
      })
      .catch(err => {
        this.err = "当前歌曲暂时无法播放";
      });
  },
  methods: {
    //获取id
    change(id, index) {
      this.$store.commit("changeid", id);
      this.$store.commit("changeindex", index); //获取播放歌曲id
      // 点击显示播放状态
      this.$store.commit("showAudio", false);
    },

    //播放全部
    playall() {
      var id = this.$store.state.songlist[0].id; //获取列表第一首的id
      this.$store.commit("changeid", id); //获取播放歌曲id
      this.$store.commit("changeindex", 0);
      this.$store.commit("showAudio", false); // 点击显示播放状态
      this.$toast("开始播放全部歌曲");
    },

    // 显示歌曲详情弹出层
    clickpop(id) {
      this.songid = id;
      this.songdetailshow = true;

      let url = "http://120.26.184.71:4000/song/detail?ids=" + id;
      this.axios.get(url).then(res => {
        this.singerid = res.data.songs[0].ar[0].id;
        this.singerimg = res.data.songs[0].al.picUrl; //歌手头像
        this.name = res.data.songs[0].al.name;
        this.singername = res.data.songs[0].ar[0].name;
      });
    },

    // 显示歌单弹出层
    clickplaylistpop() {
      this.songdetailshow = false;
      this.playlistshow=true;
      let url= "http://120.26.184.71:4000/user/playlist?uid=" + sessionStorage.getItem("id")

      // 获取用户歌单
      this.axios({
          url,
          withCredentials: true //关键
        }).then(res => {
          if (res.status == 200) {
            this.playlist=res.data.playlist
          }
        });
    },

    // 添加歌曲
    addsong(id) {
      let url="http://120.26.184.71:4000/playlist/tracks?op=add&pid="+id+"&tracks="+this.songid

      // 添加歌单
      this.axios({
          url,
          withCredentials: true //关键
        }).then(res => {
          if (res.status == 200) {
            this.playlistshow=false;
            this.$toast('添加成功')
          }
        });
    }
  },
  components: {
    // 注册一个局部组件
    backTitle
  }
};
</script>

<style>
/* 返回搜索部分 */
.searchdetail .header {
  display: flex;
  width: 100vw;
  height: 70px;
  align-items: center;
  background-color: #222831;
  color: white;
  position: fixed;
  top: 0;
  z-index: 666;
}

.searchdetail .back {
  margin-left: 20px;
  margin-right: 20px;
}

.searchdetail .van-ellipsis {
  width: 60vw;
  margin-right: 20px;
}

/* 歌单列表 */
.searchdetail .songs {
  margin-top: 60px;
  margin-left: 6vw;
  margin-bottom: 70px;
}

.searchdetail .songs-title {
  width: 90vw;
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.searchdetail .title-name {
  display: block;
  font-size: 20px;
  color: #222831;
  font-weight: bold;
  border-left: 5px #c20c0c solid;
  margin-top: 20px;
  padding-left: 10px;
}

.searchdetail .songs .playall {
  display: block;
  width: 25vw;
  height: 25px;
  border: 1px solid gray;
  border-radius: 10px;
  margin-left: 0px;
  text-align: center;
  line-height: 17px;
  margin-top: 20px;
}

.searchdetail .songs .playall i {
  margin-left: 0;
  font-size: 14px;
}

/* 功能 */
.searchdetail .add,
.searchdetail .singer,
.searchdetail .comment {
  width: 75vw;
  height: 8vh;
  margin: 0 auto 0;
  border-bottom: 1px solid #dbdbdd;
  display: flex;
  align-items: center;
}

.searchdetail .add i,
.searchdetail .singer i,
.searchdetail .comment i {
  font-size: 18px;
  margin-left: 1px;
  color: #333333;
}

.searchdetail .add span,
.searchdetail .singer span,
.searchdetail .comment span {
  width: 80vw;
  margin-left: 5vw;
  font-size: 16px;
}
</style>